<template>
  <div class="adminHandle" >

    <div style="margin-top:30px">
      <h2>图书借阅管理</h2>
      <h4>超时未归还学生</h4>
      <el-table
        :data="tableDataBorrowTimely"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="图书借阅id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="图书id">
                <span v-show="!isEdit">{{ props.row.bid }}</span>
                <el-input v-model="props.row.bid" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="图书名称">
                <span v-show="!isEdit">{{ props.row.bookName }}</span>
                <el-input v-model="props.row.bookName" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="学生学号">
                <span v-show="!isEdit">{{ props.row.studentNumber }}</span>
                <el-input v-model="props.row.studentNumber" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="学生名字">
                <span v-show="!isEdit">{{ props.row.studentName }}</span>
                <el-input v-model="props.row.studentName" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="借出日期">
                <span v-show="!isEdit">{{ props.row.borrowDate }}</span>
                <el-input v-model="props.row.borrowDate" v-show="isEdit" suffix-icon="el-icon-date"></el-input>
              </el-form-item>
              <el-form-item label="应还日期">
                <span v-show="!isEdit">{{ props.row.dueDate }}</span>
                <el-input v-model="props.row.dueDate" v-show="isEdit" suffix-icon="el-icon-date"></el-input>
              </el-form-item>
              <el-form-item label="是否归还">
                <template v-show="!isEdit">
                  <i class="el-icon-circle-check" v-show="props.row.returnFlag"></i>
                  <i class="el-icon-circle-close" v-show="!props.row.returnFlag"></i>
                </template>
                <el-select v-model="props.row.returnFlag" v-show="isEdit">
                  <el-option label="已归还" value=true></el-option>
                  <el-option label="未归还" value=false></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="warning" @click="toEdit">编辑</el-button>
                <el-button type="primary" v-show="isEdit" @click="quitEdit(props.row)">确定</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="图书名字"
          prop="bookName"
          sortable>
        </el-table-column>
        <el-table-column
          label="学生名字"
          prop="studentName"
          sortable>
        </el-table-column>
        <el-table-column
          label="出借日期"
          prop="borrowDate">
        </el-table-column>
        <el-table-column
          label="归还日期"
          prop="dueDate">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HostBookBorrow",
  data(){
    return{
      isEdit:false,
      tableDataBorrow:[],
      tableDataBorrowTimely:[],
    }
  },
  methods:{
    toEdit(){
      this.isEdit = false//true
      alert("请联系图书管理员修改")
    },
    quitEdit(row){
      this.isEdit = false
    },
  },

  mounted() {
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/bookBorrow/overTime')).then((response)=>{
      console.log(response.data)
      this.tableDataBorrow = response.data
      this.tableDataBorrowTimely = this.tableDataBorrow
    }).catch((error)=>{
      console.log(error)
    })
  },

  // watch:{
  //   tableDataBorrow:{
  //     deep:true,
  //     handler(value){
  //       console.log("检测到变化",value)
  //     }
  //   }
  // },

}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.searchBlank{
  display: flex;
  justify-content: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-button--warning:focus, .el-button--warning:hover {
  background: #00d4d9;
  border-color: #00d4d9;
  color: #FFF;
}
.el-button--warning {
  color: #FFF;
  background-color: #00a4a8;
  border-color: #00a4a8;
}
.el-form-item {
  margin: 5px 0px;
}
</style>
